<template>
  <Collapse ref="collapse">
    <template v-slot:content>
      <div class="form-inline bottom" style="justify-content: space-between; padding: 6px 20px 0;">
        <div class="left box" style="display: flex">
          <div class="row">
            <div style="margin-right: 23px;">
              <fuzzy-search
                v-model.trim="queryParams.gateWayId"
                isFilter
                title="网关序列号"
                :isShowValue="false"
                :fuzzyObj="['boxNumNoProId', 'boxNum']"
                :fuzzyFunc="fuzzyFunc"
              ></fuzzy-search>
            </div>

            <div style="margin-right: 23px ; margin-bottom: 20px">
              <span class="form-name margin-r-10">部署日期:</span>
              <date-picker format="YYYY-MM-DD"
                           value-type="format"
                           :editable="false"
                           type="date"
                           v-model="queryParams.date"
                           range
                           placeholder="选择时间范围"
                           style="width: 220px" />
            </div>
            <div style="margin-right: 23px;margin-bottom: 20px">
              <q-select
                class="select"
                outlined
                dense
                emit-value
                map-options
                options-dense
                :options="deploymentStatusList"
                v-model="queryParams.deploymentStatus">
                <template v-slot:no-option>
                  <div class="no-option" />
                </template>
                <template v-slot:before>
                  <span class="form-name">部署状态:</span>
                </template>
              </q-select>
            </div>
            <div class="flex">
              <yz-input v-model="queryParams.deviceType"
                        inputType="select"
                        :options="deviceTypeOptions"
                        title="关联设备(仪表)"
                        class="margin-r-10"
              ></yz-input>
              <fuzzy-search
                v-model.trim="queryParams.deviceId"
                :isShowValue="false"
                showAllOption
                isForm
                smallSize
                title="关联设备或仪表"
                :show-label="false"
                class="margin-r-20"
                style="width: 220px"
                :options="deviceIdOptions"
                :fuzzyFunc="getFilter"
              ></fuzzy-search>
            </div>
            <yz-input v-model="queryParams.connectStatus"
                      inputType="select"
                      :options="connectStatus"
                      title="连接状态"
                      class="margin-r-20"
            ></yz-input>
            <yz-input v-model="queryParams.onLineStatus"
                      inputType="select"
                      :options="gatewayStatusList"
                      title="网关状态"
                      class="margin-r-20"
            ></yz-input>
            <div style="margin-bottom: 20px">
              <span class="form-name margin-r-10">最后上线时间:</span>
              <date-picker format="YYYY-MM-DD"
                           value-type="format"
                           :editable="false"
                           type="date"
                           v-model="queryParams.lastOnlineTime"
                           range
                           placeholder="选择时间范围"
                           style="width: 220px" />
            </div>
          </div>
        </div>

        <div style="display: flex">
          <q-btn
            class="btn margin-r-10"
            outline
            color="primary"
            @click="resetSearch"
            label="重置"
          />
          <q-btn class="btn" unelevated type="submit" color="primary" label="查询" @click="searchList"/>
        </div>
      </div>
    </template>
  </Collapse>
</template>

<script>
import Collapse from 'components/collapse/index'
import { boxMatchQuery, deviceNumWithBox } from '../../../../boot/miot/list'
import { deploymentStatusList, deviceTypeOptions, gatewayStatusList } from './plc-dialog/constant'
import { energyUseBoxNum } from '../../../../boot/miot/plc-list'

export default {
  name: 'list-search',
  components: {
    Collapse
  },
  props: {
    connectStatus: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      fuzzyFunc: boxMatchQuery,
      queryParams: {
        date: [],
        lastOnlineTime: [],
        deviceId: null,
        gateWayId: null,
        assetNum: null,
        connectStatus: null,
        deploymentStatus: null,
        onLineStatus: null,
        deviceType: '1'
      },
      deploymentStatusList: deploymentStatusList,
      gatewayStatusList: gatewayStatusList,
      deviceTypeOptions: deviceTypeOptions,
      positionOptions: [],
      deviceIdOptions: []
    }
  },
  watch: {
    'queryParams.deviceType': {
      immediate: true,
      handler: function (val) {
        this.queryParams.deviceId = ''
        this.deviceIdOptions = []
        if (val === '1') {
          this.getDeviceNumWithBox()
        } else if (val === '2') {
          this.getEnergyUseBoxNum()
        }
      }
    }
  },
  methods: {

    getDeviceNumWithBox () {
      deviceNumWithBox().then(res => {
        if (res && res.data && res.data.length > 0) {
          this.deviceIdOptions = res.data.map(item => {
            return {
              label: `${item.deviceName}(${item.assetNumber})`,
              value: item.id
            }
          })
        } else {
          this.deviceIdOptions = []
        }
      })
    },

    getEnergyUseBoxNum () {
      energyUseBoxNum().then(res => {
        if (res && res.data && res.data.length > 0) {
          this.deviceIdOptions = res.data.map(item => {
            return {
              label: `${item.instruName}(${item.instruCode})`,
              value: item.instruId
            }
          })
        } else {
          this.deviceIdOptions = []
        }
      })
    },
    // 重置
    resetSearch () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
      this.$emit('resetSearch')
    },

    // 查询
    searchList () {
      this.$emit('searchList', this.queryParams)
    },

    getFilter (val) {
      return new Promise(resolve => {
        const res = {
          code: '1200',
          data: [],
          message: ''
        }
        if (val) {
          setTimeout(() => {
            res.data = this.deviceIdOptions.filter(item => {
              return item.label.toLowerCase().indexOf(val.toLowerCase()) > -1
            })
            resolve(res)
          }, 200)
        } else {
          setTimeout(() => {
            res.data = this.deviceIdOptions
            resolve(res)
          }, 200)
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
